<template>
  <div>
    <div class="login-logo">
      <img class="login-logo__img" src="@/assets/images/hsy-logo.png" alt="logo" />
    </div>
    <div class="login-form">
      <van-cell-group>
        <van-field
          v-model="model.userName.value"
          type="tel"
          required
          clearable
          :label="model.userName.label"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="model.sms.value"
          required
          center
          clearable
          :label="model.sms.label"
          placeholder="请输入短信验证码"
        >
          <van-button
            slot="button"
            size="small"
            type="danger"
            :disabled="codeDisabled"
            @click="sendCode"
          >{{codeTxt}}</van-button>
        </van-field>
        <van-field
          v-model="model.password.value"
          type="password"
          :label="model.password.label"
          placeholder="请设置登录密码"
          required
          clearable
        />
        <van-field
          v-model="model.surePassword.value"
          type="password"
          :label="model.surePassword.label"
          placeholder="请确认登录密码"
          required
          clearable
        />
        <van-field
          v-model="model.code.value"
          required
          center
          clearable
          :label="model.code.label"
          placeholder="请输入右图验证码"
        >
          <!--验证码组件-->
          <s-identify
            slot="button"
            :identifyCode="identify.identifyCode"
            @refreshCode="refreshCode"
          ></s-identify>
        </van-field>
      </van-cell-group>
      <div class="mtb-30 plr-20">
        <van-button type="danger" size="large" @click="submit">找回密码</van-button>
      </div>
      <div class="plr-30 tac color-link">
        <router-link to="/login" replace>返回登录</router-link>
      </div>
    </div>
    <div class="has-bottom"></div>
  </div>
</template>

<script>
import SIdentify from 'components/sIdentify'
import { Toast } from 'vant'
import { sendSms } from 'api/sms'
import { forgetPwd } from 'api/member'
export default {
  components: {
    SIdentify
  },
  data() {
    return {
      model: {
        userName: {
          label: '手机号',
          value: '',
          require: true,
          requireMessage: '请输入手机号',
          pattern: /^1[3456789]\d{9}$/,
          patternMessage: '请输入正确的手机号'
        },
        sms: {
          label: '短信验证码',
          value: '',
          require: true,
          requireMessage: '请输入短信验证码'
        },
        password: {
          label: '登录密码',
          value: '',
          require: true,
          requireMessage: '请设置登录密码',
          minLength: 6
        },
        surePassword: {
          label: '确认密码',
          value: '',
          require: true,
          requireMessage: '请输入确认密码',
          minLength: 6
        },
        code: {
          label: '验证码',
          value: '',
          require: true,
          requireMessage: '请输入验证码'
        }
      },
      codeDisabled: false,
      codeTxt: '发送验证码',
      identify: {
        //随机产生验证码的字符串
        identifyCodes: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        identifyCode: ''
      }
    }
  },
  methods: {
    // 验证码部分start
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identify.identifyCode = ''
      this.makeCode(this.identify.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identify.identifyCode += this.identify.identifyCodes[this.randomNum(0, this.identify.identifyCodes.length)]
      }
    },
    // 验证码部分end
    sendCode() {
      let self = this
      if (!/^1[3456789]\d{9}$/.test(self.model.userName.value)) {
        Toast('请输入正确的手机号')
      } else {
        sendSms(self.model.userName.value, 1).then(res => {
          //console.log(res);
          if (res) {
            Toast.success('短信验证码已发送')
            self.codeDisabled = true
            let time = 60
            self.codeTxt = time + 's'
            let clock = setInterval(() => {
              if (time == 1) {
                self.codeDisabled = false
                self.codeTxt = '发送验证码'
                clearInterval(clock)
              } else {
                self.codeTxt = --time + 's'
              }
            }, 1000)
          }
        })
      }
    },
    submit() {
      let self = this
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {
        // 验证通过
        let code = self.model.code.value.toLowerCase()
        let input = self.identify.identifyCode.toLowerCase()
        if (code === input) {
          if (self.model.password.value === self.model.surePassword.value) {
            forgetPwd(self.model).then(res => {
              //console.log(res);
              if (res) {
                Toast({
                  type: 'success',
                  message: '重置密码成功',
                  forbidClick: true,
                  onClose: function() {
                    self.$router.replace({
                      path: '/login'
                    })
                  }
                })
              } else {
                self.refreshCode()
              }
            })
          } else {
            Toast('两次密码输入不一致')
            self.refreshCode()
          }
        } else {
          Toast('验证码输入不正确')
          self.refreshCode()
        }
      } else {
        Toast(self.$utils.formValidate(self.model).msg)
      }
    }
  },
  created() {
    //初始化验证码
    this.refreshCode()
  }
}
</script>

<style lang="scss" scoped>
</style>
